<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge,Chrome=1">
    <meta http-equiv=X-UA-Compatible content="IE=9">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{$data.title}</title>
    <meta name="ROBOTS" content="NOODP">
<!--    <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            overflow-x: hidden;
            -ms-overflow-x: hidden;
            max-width: 1000px;
            background: #fff;
        }
        body{
            margin: 0 auto;
            padding: 0 15px;
        }
        .hdTitle{
            font-size: 1.7rem;
            line-height: 1.7rem;
            padding: 2rem 0;
        }
        .avatar_con{
            position: relative;
            float: left;
        }
        .img1{
            max-width: 100%;
            vertical-align: middle;
            width: 40px;
            height: auto !important;
            border-radius: 50%;
        }
        .img_tag{
            width: 0.8rem;
            height: 0.8rem;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .header-top{
            margin-bottom: 20px;
            overflow: hidden;
        }
        .hdAuthor{
            margin-left: 2%;
            line-height: 40px;
        }
        .hdTime{
            float: right;
            margin-top: 3%;
        }
        .middle
        {
            overflow: hidden;
        }
        .bottom{
            width: 100%;
            height: 40px;
            /*max-width: 1000px;*/
            position: fixed;
            z-index: 1;
            bottom: 0;
            left: 0;
            color: #fff;
        }
        .shadow{
            width: 100%;
            height: 40px;
            opacity: 0.7;
            background: #000;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
        }
        .bo-left{
            width: 16px;
            height:16px;
            line-height: 16px;
            display: block;
            float: left;
            position: relative;
            z-index: 2;
            text-align: center;
            border: 1px solid #fff;
            border-radius: 50%;
            margin: 12px;
        }
        .bo-logo{
            padding: 5px;
            float: left;
            position: relative;
            z-index: 2;
        }
        .bo-logo img{
            width: 30px;
            height: 30px;
            border-radius: 5px;
        }
        .bo-des{
            width: 50%;
            height: 40px;
            line-height: 40px;
            float: left;
            position: relative;
            z-index: 2;
        }
        .bo-btn{
            float: right;
            height: 40px;
            line-height: 40px;
            position: absolute;
            right: 0;
            z-index: 20;
            padding: 0 10px;
            background: #4393dd;
        }
        .bo-btn a{
            color:#fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id=app>
    <div class="main">
        <header class="header-top">
            <p class="hdTitle">{$data.title}</p>
            <div class="header-content">
                <div class="avatar_con">
                    <img src="{$data.avatar}" alt="" class="img1">
                    {if $data.user_type >0}
                    <img class="img_tag"
                         src="{$oss.'static/video_share/images/'.($data.user_type==1?'offical.png':'goddess.png')}">
                    {/if}
                </div>
                <span class="hdAuthor">{$data.author}</span>
                <span class="hdTime">{:date('m.d Y', $data.publish_time)}</span></div>
        </header>
        <hr>
    </div>
    <section class="middle">
            {$data.content}
    </section>
    <div class="bottom" id="bottom">
        <div class="shadow"></div>
        <div class="bo-left" id="close">x</div>
        <div class="bo-logo">
            <img src="/uploads/20180329/33503860a02a86f4c23d59ac75ec5b59.jpg" alt="">
        </div>
        <div class="bo-des">启动APP体验更多惊喜</div>
        <div class="bo-btn">
            <a href="javascript:;" id="btn">打开APP</a>
        </div>
    </div>
    {include file="../apps/web/view/public/sensors.html" /}
    <script language="javascript">
        {if condition="$type===1"}
            let link = 'article_details?id={$data.id}';
            // new JMLink({
            //     jmlink: 'https://s0ue2y.jmlk.co/AA63',// 短链地址
            //     button: document.querySelector('a#btn'),
            //     plhparams: {
            //         target: 'local',
            //         link: link
            //     }
            // });
            document.querySelector('a#btn').addEventListener('click',function(e){
                window.location = 'https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link='+encodeURIComponent(link);
            })
        {else /}
            let link = 'article_info?id={$data.id}&type=2&content_type=1';

            // new JMLink({
            //     jmlink: 'https://s0ue2y.jmlk.co/AA63',// 短链地址
            //     button: document.querySelector('a#btn'),
            //     plhparams: {
            //         target: 'local',
            //         link: link
            //     }
            // });
            document.querySelector('a#btn').addEventListener('click',function(e){
                window.location = 'https://applink-zhunle.goddessxzns.com?app=zhunle&target=local&link='+encodeURIComponent(link);
            })
        {/if}

        var close_btn = document.getElementById('close');
        close_btn.onclick = function () {
            document.getElementById('bottom').style.display = 'none';
        }

        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
        });
        wx.ready(function(){
            wx.onMenuShareAppMessage({
                title: '{$data.title}', // 分享标题
                desc: '{$data.introduction}', // 分享描述
                link: '{$signPackage.url}', // 分享链接
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareTimeline({
                title: '{$data.title}', // 分享标题
                link: '{$signPackage.url}', // 分享链接$signPackage.url
                imgUrl: 'https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>
</div>
</body>
</html>
